<template>
  <el-select
    v-model="list"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :loading="loading"
    >
    <el-option
      v-for="item in all"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
        loading: false,
        goodsList:[],
        all:[]
      }
    },
    mounted() {
      this.getAllGoods()
    },
    methods: {
      // 获取所有商品
        getAllGoods(){
          this.$http.get(this.apiObj.goodsList).then(data=>{
            if(data.status == 200){
              this.goodsList = data.content.goods_info
              console.log(this.goodsList)
            }
          })
        },
      remoteMethod(query) {
        console.log(query)
        if (query !== '') {
          var goodsList = this.goodsList
          this.all = query ? goodsList.filter(item=>item.name.indexOf(query)!=-1) : goodsList
        } else {
          this.all = this.goodsList;
        }
      },
    }
  }
</script>